<template>
<div>
<van-cell  @click="showPopup" style="  background: #ec6941;
     font-size:12px ; " >{{city}} <van-icon name="arrow-down" /></van-cell>
<van-popup v-model="show" position="top" :style="{ height: '30%' }">
        <van-grid :column-num="6">
    <van-grid-item v-for="(item,index) in citys" :key="index" >
        <div style="font-size:12px" @click="showPopdown(item.Name)">{{item.Name}}</div>
    </van-grid-item>
</van-grid>

</van-popup>

</div>

  
  
</template>

<script>
import {mapState, mapMutations,mapActions} from 'vuex'
import { getCity} from "../api";
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
import { Popup } from 'vant';
import { Cell} from 'vant';

Vue.use(Cell);

Vue.use(Popup);

Vue.use(Grid);
Vue.use(GridItem);

export default {
    data() {
        return {
             citys:[],
             lv1:0,
             show: false,
            //  i:'北京'
        }
    },
      
  computed: {
    ...mapState([
      'city'
    ])
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    showPopdown(n){
        this.show=false;
        // this.city=n;
        // this.$router.push({name:'first',params:{id:this.i}})
        this.$store.commit('showPopdown',n)
    },
    // ...mapMutations([
    //   'showPopdown'
    // ])
    },
    async created() {
    let res = await getCity();
    this.citys = res.data;
  }

}
</script>

<style scoped>
.van-cell__value--alone{
  color: white;
  text-align: center;

}
.van-cell::after{
  /* text-decoration: #ec6941; */
  border-bottom:#ec6941  ;

}
.van-cell{
  padding:5px;
  padding-top:14px;
}

</style>